import React,{useEffect,useState} from "react";
import "../../../styles/DepositExamine.scss";
import type { ColumnsType } from 'antd/es/table';
import {
  Input,
  DatePicker,
  Form,
  Button,
  Table,
  Space
} from "antd";
import {audit_list} from "../../../utils/api/index"
interface Props {}

function DepositExamine(props: Props) {
  interface DataType {
    key: string;
    danhao: number;
    name: string;
    cangku: string;
    sqtime:string;
    shenheren:string;
    shenhetime:string;
    zhuangtai:string;
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "出库单号",
      dataIndex: "danhao",
      key: "danhao",
    },
    {
      title: "出库人员",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "出库仓库",
      dataIndex: "cangku",
      key: "cangku",
    },
    {
      title: "申请出库时间",
      dataIndex: "sqtime",
      key: "sqtime",
    },
    {
      title: "审核人员",
      dataIndex: "shenheren",
      key: "shenheren",
    },
    {
      title: "审核时间",
      dataIndex: "shenhetime",
      key: "shenhetime",
    },
    {
      title: "状态",
      dataIndex: "zhuangtai",
      key: "zhuangtai",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>审核</a>
          <a>详情</a>
        </Space>
      ),
    },
  ];
  var [auditarr,setAuditarr] = useState([])
  var search = function (datas: any) {
    console.log(datas);
  };
  useEffect(()=>{
    audit_list().then((res)=>{
        // console.log(res.data);
        setAuditarr(res.data)
    })
  })
  return (
    <div className="depositexamine">
      <div className="head">仓储管理 / 出库管理 / 出库列表</div>
      <div className="middle">
        <Input placeholder="请输入单号" />
        <Input placeholder="请选择仓库" />
        <Input placeholder="请选择出库人员" />
        <Form.Item>
          <DatePicker className="date" placeholder="请选择申请日期" />
        </Form.Item>
        <Input placeholder="请选择状态" />
        <Button type="primary" onClick={search}>
          搜索
        </Button>
      </div>
      <div className="main">
        <Table columns={columns} dataSource={auditarr} />
      </div>
    </div>
  );
}

export default DepositExamine;
